<template>
  <div class="wuliuxinxi">
    <!-- 导航栏 -->
    <van-nav-bar left-arrow
                 class="van-navbar"
                 @click-left="onClickLeft">
      <template v-slot:title>
        <h2 style="margin-top:50px">{{$route.meta.title}}</h2>
      </template>
    </van-nav-bar>
   <!-- 地图  -->
   <div>
     <img src="@/assets/images/ditu.png" alt="">
   </div>
   <!-- 货物信息 -->
   <div class="shunfeng">
    <img src="@/assets/images/shunfenglogo.png" alt="" class="logo">
      <span>顺丰速运</span>
  </div>
  <!-- 路线 -->
  <div class="luxian">
    <div class="lucheng">
      <span class="danhao">单号：1079956651236</span>
      <span>距离：</span>
      <span style="color:#921B31">940km</span>
      <hr>
      <div class="zhuanzhan">
        <img src="@/assets/images/daoda.png" alt="" class="daodaimg">
        <span style="color: #333; font-weight:900;">深圳转运中心&nbsp;</span>
        <span style="color: #999999; font-weight:900;">发往&nbsp;</span>
        <span style="color: #333; font-weight:900;">广州转运中心</span><br>
        <span style="margin-left:100px; color: #999999;">2019年7月12日&nbsp;&nbsp;&nbsp;上午1:54:44</span>
        <hr>
      </div>
      <div class="zhuanzhanbox">
        <img src="@/assets/images/luguo.png" alt="" class="daodaimg">
        <span style="font-weight:900;">深圳转运中心&nbsp;</span>
        <span style="color: #999999; font-weight:900;">已收入&nbsp;</span>
        <p><span style="margin-left:100px; color: #999999;">2019年7月12日&nbsp;&nbsp;&nbsp;上午1:54:44</span></p>
        <hr>
      </div>
      <div class="zhuanzhanbox">
        <img src="@/assets/images/luguo.png" alt="" class="daodaimg">
        <span style="font-weight:900;">深圳市火车站公司&nbsp;</span>
        <span style="font-weight:900;">发往&nbsp;</span>
        <span style="font-weight:900;">深圳转运中心</span><br>
        <span style="margin-left:100px;">2019年7月12日&nbsp;&nbsp;&nbsp;上午1:54:44</span>
        <hr>
      </div>
      <div class="zhuanzhanbox">
        <img src="@/assets/images/luguo.png" alt="" class="daodaimg">
        <span style="font-weight:900;">深圳市火车站公司&nbsp;</span>
        <span style="font-weight:900;">已打包&nbsp;</span>
        <span style="margin-left:100px;">2019年7月12日&nbsp;&nbsp;&nbsp;上午1:54:44</span>
        <hr>
      </div>
      <div class="zhuanzhanbox">
        <img src="@/assets/images/luguo.png" alt="" class="daodaimg">
        <span style="font-weight:900;">深圳市OMINI快递点&nbsp;</span>
        <span style="color: #999999; font-weight:900;">已取件&nbsp;</span>
        <span style="margin-left:100px; color: #999999;">2019年7月12日&nbsp;&nbsp;&nbsp;上午1:54:44</span>
        <hr>
      </div>
      <div class="zhuanzhanbox">
        <img src="@/assets/images/luguo.png" alt="" class="daodaimg">
        <span style="font-weight:900;">OMINI官方旗舰店&nbsp;</span>
        <span style="color: #999999; font-weight:900;">已发货&nbsp;</span>
        <span style="margin-left:100px; color: #999999;">2019年7月12日&nbsp;&nbsp;&nbsp;上午1:54:44</span>
        <hr>
      </div>
      <div class="zhuanzhanbox">
        <h4 style="color:#8E7E6E; margin:auto 130px; ">没有更多了</h4>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'wuliuxinxi',
  methods: {
    // 点击，返回上一页
    onClickLeft() {
      // console.log(this.$router)
      this.$router.back() // 编程式的导航
    },
  },
}
</script>

<style lang="less" scoped>
.wuliuxinxi{
  position: relative;
}
.van-navbar {
  // margin-top: 10px;
  height: 80px;
  background: #eae9e5;
}
/deep/ .van-icon {
  margin-top: 40px;
  font-size: 30px;
}
.van-nav-bar /deep/.van-icon {
  color: #333;
}
.shunfeng{
  width: 280px;
  height: 90px;
  font-size: 20px;
  font-weight: 900;
  line-height: 90px;
  border-radius: 10px 100px 5px 5px;
  background: #eae9e5;
  position: absolute;
  left: 0px;
  top: 380px;
  z-index: 99;
}
.logo{
    width: 60px;
    height: 60px;
  vertical-align:middle;
    background: black;
}
.luxian{
  background: #eae9e5;
}
.lucheng{
  padding-top: 60px;
  font-size: 18px;
}
.danhao{
  color: #999999;
  margin-right: 110px;
}
.zhuanzhan{
  padding: 20px;
  line-height: 70px;
}
.zhuanzhanbox{
  color: #999;
  padding: 20px;
  line-height: 70px;
}
.daodaimg{
  width: 32px;
  height: 32px;
  margin-right: 30px;
}
</style>
